<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .mycenter{
            margin-top:100px;
            margin-left:auto;
            margin-right:auto;
            height:350px;
            width:1000px;
            padding:5%;
            padding-left:5%;
            padding-right:5%;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="form row">
            <form class="form-horizontal" action="{% url 'note:addNote' %}" method="post" role="form">
                {% csrf_token %}
                <div class="mycenter">
                    <div class="col-sm-4 col-md-4">
                        <div class="form-group">
                            <label for="addtitle">标题</label>
                            <input type="text" id="addtitle" name="title" placeholder="请输入标题">
                            <button type="submit" value="确认">确认</button>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" name="content" rows="10"></textarea>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>